<template>
  <view style="padding-bottom: 40rpx">
    <uni-nav-bar1 title="视频详情" fixed leftIcon="arrowleft" statusBar :border="false" color="#fff"></uni-nav-bar1>
    <view class="page">
      <view class="video-box">
        <video v-if="detail.vidioUrl" :src="detail.vidioUrl" class="video"></video>
      </view>
      <view class="content">
        <rich-text :nodes="detail.detail"></rich-text>
      </view>
      <!-- <view class="icon-line">
        <view class="iconfont iconweidianzhongdeaixin icon-box"></view>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detail: {},
    };
  },
  onLoad(options) {
    this.getData(options.id);
  },
  methods: {
    getData(id) {
      this.$axios({
        method: "get",
        url: `farming/detail/${id}`,
      }).then((res) => {
        this.detail = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 686rpx;
  margin: 26rpx auto 30rpx;
  background: #f0f2f9;
  box-shadow: 0rpx 4rpx 20rpx 16rpx rgba(37, 39, 38, 0.06);
  border-radius: 16rpx;
  border: 2rpx solid #e5e5e5;
  background: #fbfbfb;
}
.video-box {
  position: relative;
  border-radius: 16rpx;
  overflow: hidden;
  .video {
    display: block;
    width: 100%;
  }
}
.content {
  padding: 32rpx 34rpx;
  font-size: 28rpx;
  font-family: Manrope-Regular, Manrope;
  font-weight: 400;
  color: #6a6e71;
  line-height: 48rpx;
  .title {
    margin-bottom: 20rpx;
    font-size: 32rpx;
    font-family: Manrope-SemiBold, Manrope;
    font-weight: 600;
    color: #35383b;
    line-height: 44rpx;
  }
}
.icon-line {
  padding: 32rpx 34rpx;
  background: #e5e5e5;
  .icon-box {
    width: 81rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    background: #fbfbfb;
    box-shadow: 0rpx 4rpx 20rpx 16rpx rgba(37, 39, 38, 0.04);
    border-radius: 24rpx;
    border: 2rpx solid #e5e5e5;
  }
}
</style>
